<template>
  <el-card class="sales">
    <template #header>
      <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">销售额</el-menu-item>
        <el-menu-item index="2">访问量</el-menu-item>
      </el-menu>
      <div class="right">
        <el-radio-group v-model="state.time">
          <el-radio-button label="今天" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="本年" />
        </el-radio-group>
        <el-date-picker v-model="state.value" type="daterange" unlink-panels range-separator="到" start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" :size="size" />
      </div>
    </template>
    <div class="sales-content">
      <v-chart :option="getOption()" autoresize></v-chart>
      <div class="content-list">
        <h4 class="list-title">门店{{state.activeIndex==='1'?'销售额':'访问量'}}排名</h4>
        <ul>
          <!-- <li><span class="list-no">1</span><span>肉夹馍</span><span>323,234</span></li>
          <li><span class="list-no">2</span><span>裤带面</span><span>123,456</span></li>
          <li><span class="list-no">3</span><span>饸饹面</span><span>456,789</span></li>
          <li><span>4</span><span>熏肉大饼</span><span>299,123</span></li>
          <li><span>5</span><span>水盆羊肉</span><span>266,223</span></li>
          <li><span>6</span><span>魏家凉皮</span><span>219,663</span></li>
          <li><span>7</span><span>兰州拉面</span><span>200,997</span></li> -->

          <li v-for="rank in rankData" :key="rank.no"><span :class="{'list-no':rank.no<=3}">{{rank.no}}</span><span>{{rank.name}}</span><span>{{rank.count}}</span></li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sales'
};
</script>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();
// const activeIndex = ref('1');

const size = ref<'default' | 'large' | 'small'>('default');
// const radio2 = ref('本周');
// const value1 = ref('');
// const value2 = ref('');

const state = reactive({
  activeIndex: '1',
  time: '本周',
  value: ''
});

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

// 1. 准备柱状图及右侧需要的相关数据
const orderFullYear = computed(() => reportDataStore.reportData.orderFullYear);
const orderFullYearAxis = computed(() => reportDataStore.reportData.orderFullYearAxis || []);
const userFullYear = computed(() => reportDataStore.reportData.userFullYear);
const userFullYearAxis = computed(() => reportDataStore.reportData.userFullYearAxis || []);
// 右侧渲染时需要用到的数据
const orderRank = computed(() => reportDataStore.reportData.orderRank || []);
const userRank = computed(() => reportDataStore.reportData.userRank || []);

const rankData = computed(() => (state.activeIndex === '1' ? orderRank.value : userRank.value));
const getOption = () => {
  const text = state.activeIndex === '1' ? '销售额趋势' : '访问量趋势';
  return {
    title: {
      text,
      textStyle: {
        fontSize: 14
      }
    },
    xAxis: {
      type: 'category',
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      data: state.activeIndex === '1' ? orderFullYearAxis.value : userFullYearAxis.value
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: 50,
      top: 50,
      bottom: 50,
      right: 50
    },
    // color:'orangered',
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: state.activeIndex === '1' ? orderFullYear.value : userFullYear.value,
        type: 'bar',
        barWidth: '40%',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };
};

const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
  state.activeIndex = key;
};
</script>

<style lang="scss" scoped>
.sales {
  // margin-top: 20px;
  margin: 20px 0;
  :deep(.el-card__header) {
    border-bottom: none;
    padding: 0 20px;
    position: relative;
    .right {
      position: absolute;
      right: 10px;
      top: 10px;
      display: flex;
      align-items: center;
      .el-date-editor {
        margin-left: 20px;
      }
    }
  }
  .sales-content {
    display: flex;
    height: 300px;
    padding: 0 10px;
    .echarts {
      flex: 5;
    }
    .content-list {
      flex: 2;
      h4 {
        font-size: 14px;
        font-weight: 500;
      }
      ul {
        list-style: none;
        padding: 0 10px 0 0;
        li {
          font-size: 13px;
          height: 28px;
          // line-height: 28px;
          span {
            &:first-child {
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 22px;
              text-align: center;
              margin-right: 10px;
            }
            &.list-no {
              background-color: #000;
              border-radius: 50%;
              color: #fff;
            }
            &:last-child {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>